-
<template>
  <!-- <el-scrollbar> -->
  <div id="editEmployees">
    <el-form ref="ployeeFormRef" :model="ployeeForm" :rules="ployeeFormRule" label-width="120px" class="form-input-m baseEditinfo" :inline-message="true">
      <!-- 一级菜单表单 -->
      <el-form-item prop="name" label="名称">
        <el-input type="text" v-model="ployeeForm.name" placeholder="请输入员工姓名" @change="autoInputCode" clearable></el-input>
      </el-form-item>
      <el-form-item prop="inputCode" label="助记符">
        <el-input type="text" v-model="ployeeForm.inputCode" placeholder="请输入助记符" clearable></el-input>
      </el-form-item>
      <el-form-item prop="code" label="编号">
        <el-input type="text" v-model="ployeeForm.code" placeholder="请输入员工编号" clearable></el-input>
      </el-form-item>

      <el-form-item label="所属院区" prop="orgId">
        <el-select v-model="ployeeForm.orgId" placeholder="请选择" :teleported="false" ref="selectOrgRef" filterable style="width: 200px;">
          <el-option hidden :value="ployeeForm.orgId ? ployeeForm.orgId : ''" :label="ployeeForm.orgName"></el-option>
          <el-tree filterable :data="orgList" :props="defaultProps" :expand-on-click-node="false" :default-expand-all="true" @node-click="handleOrgNodeClick" highlight-current ref="orgTreeRef" node-key="id" class="tools-tree"></el-tree>
        </el-select>
      </el-form-item>

      <el-form-item label="所属科室" prop="deptId">
        <el-select v-model="ployeeForm.deptId" placeholder="请选择" @clear="handleDeptClear" :teleported="false" ref="selectDeptRef" clearable style="margin-left: 5px;width: 200px" filterable>
          <el-option hidden :value="ployeeForm.deptId ? ployeeForm.deptId : ''" :label="ployeeForm.deptName"></el-option>
          <el-tree filterable :data="deptList" :props="defaultProps" :expand-on-click-node="false" :default-expand-all="true" @node-click="handleDeptNodeClick" highlight-current ref="deptTreeRef" node-key="id" class="tools-tree"></el-tree>
        </el-select>
      </el-form-item>
      <el-form-item prop="position" label="岗位">
        <el-input type="text" v-model="ployeeForm.position" placeholder="请输入岗位名称" clearable></el-input>
      </el-form-item>
      <el-form-item prop="duty" label="职务">
        <el-input type="text" v-model="ployeeForm.duty" placeholder="请输入职务名称" clearable></el-input>
      </el-form-item>
      <el-form-item prop="strativeLevel" label="职称">
        <el-input type="text" v-model="ployeeForm.strativeLevel" placeholder="请输入职称" clearable></el-input>
      </el-form-item>
      <el-form-item prop="seq" label="顺序">
        <el-input-number v-model="ployeeForm.seq" :min="1" :max="1000" />

      </el-form-item>
    </el-form>

    <div class="dialog-footer1 flex justify-center padding">
      <el-button type="primary" @click="save()">保存</el-button>
      <el-button @click="closeDialog()">关闭</el-button>
    </div>
  </div>
  <!-- </el-scrollbar> -->
</template>

<script lang="ts" setup>
// 引入组件区 ==========
import { ref, reactive, getCurrentInstance, onMounted } from 'vue';
let { proxy }: any = getCurrentInstance();
import { VxeMessage, VxeNotifyType } from '@/utils/CommonMessage';
import { funBdsJsResult } from '@/utils/Expression';

// 全局变量定义区 ==========

let orgList: any = reactive([]); //所有的组织机构
let deptList: any = reactive([]); //所有的部门
let defaultProps = {
  children: 'children',
  label: 'name'
};

let ployeeFormRef = ref(); //表单标记点

let ployeeForm = reactive({
  id: '',
  code: '',
  name: '',
  inputCode: '',
  // 机构
  orgId: '',
  orgName: '',
  // 科室
  deptId: '',
  deptName: '',
  // 岗位
  position: '',
  // 职务
  duty: '',
  // 职称
  strativeLevel: '',
  isDeactivated: true,
  seq: 1,
  //用户输入查询内容
  seachValue: ''
});

//暴露属性和方法
defineExpose({
  init
});

// 方法定义区 =============
// 页面加载时更新用户/角色列表
onMounted(() => {
  findOrgTree();
});

// 方法定义区 =============
function init(item: any) {
  // 如果item.id员工id存在说明是编辑赋值 否则就是新建
  if (item.id) {
    ployeeForm.id = item.id; //员工id
    ployeeForm.code = item.code; //编码
    ployeeForm.name = item.name; //名称
    ployeeForm.orgId = item.orgId; //机构id
    ployeeForm.orgName = item.orgName; //机构名称
    ployeeForm.deptId = item.deptId; //部门id
    ployeeForm.deptName = item.deptName; //部门名称
    ployeeForm.seq = item.seq;
  } else {
    ployeeForm.orgId = item.orgId; //机构id
    ployeeForm.orgName = item.orgName; //机构名称
    ployeeForm.deptId = item.deptId; //部门id
    ployeeForm.deptName = item.deptName; //部门名称
  }
  findDeptTree();
}

// 光标定位在指定字典分类上
function setCurOrgTreeNode(nodeId: any) {
  proxy.$nextTick(() => {
    const treeName = 'orgTreeRef';
    const tree: any = proxy.$refs[treeName];
    tree.setCurrentKey(nodeId);
  });
}

function setCurDeptTreeNode(nodeId: any) {
  proxy.$nextTick(() => {
    const treeName = 'deptTreeRef';
    const tree: any = proxy.$refs[treeName];
    tree.setCurrentKey(nodeId);
  });
}
const ployeeFormRule = ref({
  name: [
    {
      required: true,
      message: '请输入名称',
      trigger: 'blur'
    },
    {
      min: 2,
      max: 20,
      message: '长度为2到20个字符',
      trigger: 'blur'
    }
  ]
  // orgName: [
  //   {
  //     required: true,
  //     message: '请选择组织机构',
  //     trigger: 'blur'
  //   }
  // ],
  // deptName: [
  //   {
  //     required: true,
  //     message: '请选择所属部门名称',
  //     trigger: 'blur'
  //   }
  // ],
  // hashedCode: [
  //   {
  //     required: true,
  //     message: '请输入授权码',
  //     trigger: 'blur'
  //   }
  // ]
});

function autoInputCode() {
  ployeeForm.inputCode = funBdsJsResult('firstPinYinFun', ployeeForm.name);
}

//保存
function save() {
  let $el = proxy.$refs.ployeeFormRef;
  $el.validate((valid: any) => {
    if (!valid) {
      return false;
    }
    //判断添加和编辑
    if (ployeeForm.id) {
      const url = '/api/sys/hisEmployee/editHisEmployee';
      const hisEmployeeAddParam = {
        id: ployeeForm.id,
        code: ployeeForm.code,
        name: ployeeForm.name,
        inputCode: ployeeForm.inputCode,
        orgId: ployeeForm.orgId,
        deptId: ployeeForm.deptId,
        position: ployeeForm.position,
        duty: ployeeForm.duty,
        strativeLevel: ployeeForm.strativeLevel,
        seq: ployeeForm.seq
      };
      proxy.$http
        .put(url, hisEmployeeAddParam)
        .then((res: any) => {
          VxeMessage('修改员工成功', VxeNotifyType.success);
          proxy.$emit('findPloyeeList'); //给父组件命令让其重新获取获取数据
        })
        .catch((err: any) => {
          VxeMessage('修改员工失败', VxeNotifyType.error);
        });
    } else {
      const url = '/api/sys/hisEmployee/addHisEmployee';
      const hisEmployeeAddParam = {
        id: ployeeForm.id,
        code: ployeeForm.code,
        name: ployeeForm.name,
        inputCode: ployeeForm.inputCode,
        orgId: ployeeForm.orgId,
        deptId: ployeeForm.deptId,
        position: ployeeForm.position,
        duty: ployeeForm.duty,
        strativeLevel: ployeeForm.strativeLevel,
        seq: ployeeForm.seq
      };
      proxy.$http
        .post(url, hisEmployeeAddParam)
        .then((res: any) => {
          VxeMessage('新增员工成功', VxeNotifyType.success);
          proxy.$emit('findPloyeeList'); //给父组件命令让其重新获取获取数据
          proxy.$emit('closePerDialog'); //保存即可关闭弹框并清空
        })
        .catch((err: any) => {
          VxeMessage('新增员工失败', VxeNotifyType.error);
        });
    }
  });
}

// 取消添加
// @Emit('closePerDialog')

function closeDialog() {
  let $el = proxy.$refs.ployeeFormRef;
  //移除校验结果
  $el.resetFields();
  ployeeForm.id = '';
  ployeeForm.code = '';
  ployeeForm.name = '';
  ployeeForm.orgId = '';
  ployeeForm.orgName = '';
  ployeeForm.deptId = '';
  ployeeForm.deptName = '';
  ployeeForm.position = '';
  ployeeForm.duty = '';
  ployeeForm.strativeLevel = '';
  proxy.$emit('closePerDialog');
}

function findOrgTree() {
  orgList.length = 0;
  const url = '/api/sys/findOrgTree';
  proxy.$http
    .get(url)
    .then((res: any) => {
      if (res.status.code !== 1) {
        proxy.$alert(res.status.msg, '提示');
      } else {
        orgList.push(...res.data.orgTree);
        setCurOrgTreeNode(ployeeForm.orgId);
      }
    })
    .catch((err: any) => {
      VxeMessage('获取机构失败', VxeNotifyType.error);
    });
}

function findDeptTree() {
  deptList.length = 0;
  const url = '/api/sys/findDeptTree';
  const obj = { orgId: ployeeForm.orgId, orgName: ployeeForm.orgName };
  proxy.$http
    .get(url, { params: obj })
    .then((res: any) => {
      if (res.status.code !== 1) {
        VxeMessage('获取部门失败', VxeNotifyType.error);
      } else {
        deptList.push(...res.data.deptList);
        setCurDeptTreeNode(ployeeForm.deptId);
      }
    })
    .catch((err: any) => {
      proxy.$alert(err, '提示');
    });
}

function handleOrgNodeClick(data: any) {
  ployeeForm.orgId = data.id;
  ployeeForm.orgName = data.name;
  ployeeForm.deptId = '';
  ployeeForm.deptName = '';
  findDeptTree();
  const selectOrgRef: any = proxy.$refs['selectOrgRef'];
  selectOrgRef.blur();
}

function handleDeptNodeClick(data: any) {
  ployeeForm.deptId = data.id;
  ployeeForm.deptName = data.name;
  const selectDeptRef: any = proxy.$refs['selectDeptRef'];
  selectDeptRef.blur();
}

function handleDeptClear() {
  ployeeForm.deptId = '';
  ployeeForm.deptName = '';
  const treeName = 'deptTreeRef';
  const tree: any = proxy.$refs[treeName];
  tree.setCurrentKey(null);
}
</script>
<style lang="scss" scoped>
#editEmployees {
  height: 100%;
  overflow: auto;
}
</style>
